<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素遍历操作  ：针对DOM树中元素进行遍历【父子级关系】
		 children()      功能：获取匹配元素集合中每个元素的直接子元素
		 parent()        功能：获取匹配元素集合中每个元素的直接父元素
		 
		 siblings()      功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()          功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()          功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()          功能：遍历匹配元素集合，对每个元素执行指定的函数
		 -->
		<style>
			.container{
				border: 1px solid red;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: aquamarine;
				padding: 10px;
				margin: 10px;
			}
			button{
				padding: 10px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<!-- 外层div
		 css:container：1像素边框 内外边距10px
		     box：背景颜色自定 内外边距10px
			 button：加外边距5px-->
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<button id="getcrbtn">获取直接子元素</button>
			<button id="getpbtn">获取父元素</button>
			<button id="getsbtn">获取兄弟元素</button>
			<button id="getnbtn">获取下一个兄弟元素</button>
			<button id="getpnbtn">获取上一个兄弟元素</button>
			<button id="eachBtn">遍历元素</button>
			<script>
				/* 1.点击 获取直接子元素 按钮  container父元素 给box元素添加 10px */
				$("#getcrbtn").click(function(){
					$(".container").children().css("border","10px solid red");
				});
				/* 2.点击获取父元素按钮 .container父元素加背景色#ff0 */
				$("#getpbtn").click(function(){
					$(".box").parent().css("background-color","#ff0");
				});
				/* 3.点击 获取兄弟元素按钮 box3的兄弟元素 加背景颜色：#f00 */
				$("#getsbtn").click(function(){
					$("#box3").siblings().css("background-color","#f00");
				});
				/* 4.点击 获取下一个兄弟元素按钮 box2的下一个元素 加背景颜色#eee */
				$("#getnbtn").click(function(){
					$("#box2").next().css("background-color","#eee");
				});
				/* 5.点击获取上一个兄弟元素按钮 box4的上一个元素 圆 阴影 字体放大 */
				$("#getpnbtn").click(function(){
					$("#box4").prev().css({"width":"200px",
					                       "height":"200px",
										   "background-color":"#ff0",
										   "text-shadow":"5px 5px 10px #ff0",
										   "font-size":"2em",
										   "border-radius":"50%",
										   "line-height":"200px",
										   "text-align":"center"});
				});
				/* 6.点击遍历元素按钮 实现动态输出这是box1 
				      each(function(index,element){识别''传入下标${index}})
					  注意：千万别加单双引号，别加拼接符*/
				$("#eachBtn").click(function(){
					$(".box").each(function(i,e){//i下标 |e 元素---形参
						$(e).text(`这是第${i+1}盒子`);
					});
				});
				
			</script>
		</div>
	</body>
</html>